<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<input type="text">
<input type="button" value="最后面添加">
<input type="button" value="最前面添加">
<input type="button" value="上海前面添加">
<input type="button" value="上海后面添加">
<input type="button" value="删除广州">
<ul>
    <li>北京</li>
    <li>上海</li>
    <li>广州</li>
</ul>
<script src="../js/jquery-1.4.2.js"></script>
<script>
    $('input:eq(1)').click(function () {
        //创建li元素
        let li=$('<li></li>')
        //给li元素设置文本内容
        li.text($('input:first').val())
        //把li添加到ul里面
        $('ul').append(li)
    })
    $('input:eq(2)').click(function () {
        let li=$('<li></li>')
        li.text($('input:first').val())
        $('ul').prepend(li)
    })
    $('input:eq(3)').click(function () {
        let li=$('<li></li>')
        li.text($('input:first').val())
        $('li:contains("上海")').before(li)
    })
    $('input:eq(4)').click(function () {
        let li=$('<li></li>')
        li.text($('input:first').val())
        $('li:contains("上海")').after(li)
    })
    $('input:eq(5)').click(function () {

        $('li:contains("广州")').remove()
    })

    $('li').css('color','red')//修改
    let color=$('li').css('color')//获取
    console.log('字体颜色:'+color)
    //批量修改元素的样式
    $('li').css({"font-size":"30px","background-color":"pink"})
    //创建一个超链接
    let a=$('<a>超链接</a>')
    //修改元素的属性值
    a.attr('href','http://www.baidu.com')
    $('body').append(a)
    //获取元素的属性值
    console.log(a.attr('href'))
    $('a').attr('href','http://www.tedu.cn')
</script>
</body>
</html>